/*
  state 状态 react 组件数据交互的载体  状态用来修改的 
  1. state 不能在组件外部定义  不能在组件外部 修改  只能在组件内部定义声明 只能在内部修改 
  2. state 用来被修改的  this.state 获取 state, this.setState() 来修改 state 
  3. state 在组件内部的 getInitialState(已废弃) 来初始化定义 state ,必须返回一个对象 
  4. state 修改 setState 这个方法会修改 state 会重新执行 组件内部的 render方法 , 会触发页面的
  二次渲染  虚拟DOM 会根据react 的 diff  算法  得到新的虚拟DOM 最后的批量的更新    
  
*/
import React, { Component } from 'react'
import PropTypes from "prop-types"

// extends 表示继承  State1 继承 Component 
// super()    当函数时候  表示指向父类的构造器      表示子类继承得到父类的 构造器 
// super.a()   当对象时候 表示指向父类的原型对象   
export default class State1 extends Component {

  constructor(props) {
    super(props)

    // 优先级高 
    this.state = {
      toggle: true,
      count: 1000,
      text: "越努力越幸运"
    }
  }
  state={
    txt:"2114-加油",
    n:2000
}
changeToggle=()=>{
  // setState  
  this.setState({
      toggle:!this.state.toggle
  })
}
changeCount=payload=>{
  this.setState({
      count:this.state.count+payload 
  },()=>{
      console.log('你已经修改了count ')
  })
}
changeText=(e)=>{
  this.setState({
      text:e.target.value 
  })
}
  render() {
   
    const { msg, flag } = this.props
    console.log(this.state)

    const {toggle,count,text  } = this.state
    // 死循环 
    // this.setState({
    //     count:++this.state.count 
    // })
    return (
      <div>{

        toggle && <div>
        <h2>
          react state 机制
        </h2>
        <p>state 当作是组件内部的响应式数据</p>
        <p>{msg} --  {flag ? '晚上熬夜不见不散' : '明天出去看电影'}</p>
        <h2>v-if </h2>
        <h2>count --- {count}</h2>
        <h2>text --- {text} </h2>
       
      </div>


        }
          <button onClick={this.changeToggle }>点击切换</button>
        <button onClick={()=>this.changeCount(10) }>修改 count </button>
      </div>
    )
  }
}

State1.propTypes = {
  flag: PropTypes.bool.isRequired,
  msg: PropTypes.string.isRequired,
}